/**
* JavaScript是一种事件驱动的语言
**/

function addEvent(el, type, fn) {
	if (window.addEventListener) {
		el.addEventListener(type, fn, false);
	} else if (window.attchEvent) {
		el.attachEvent('on' + type, fn);
	} else {
		el['on' + type] = fn;
	}
}

// 中止事件沿DOM树向上冒泡的传播过程
// event.stopPropagation();

// 阻止浏览器针对一个事件的默认行为
// event.preventDefault()

var DED = window.DED || {};
DED.util = {
	stopPropagation: function(e) {
		if (ev.stopPropagation) {
			// W3 interface
			e.stopPropagation();
		} else {
			// IE's interface
			e.cancelBubble = true;
		}
	},
	preventDefault: function(e) {
		if (e.preventDefault) {
			// W3 interface
			e.preventDefault();
		} else {
			// IE's interface
			e.returnValue = false;
		}
	},
	/* our convenience method */
	stopEvent: function(e) {
		DED.util.stopPropagation(e);
	}
}

// 尽管看起来很像，但门面模式并不是适配器模式。适配器（第11章）是一种包装器，用来对接口进行适配以便在不兼容系统中使用它。
// 而创建门面元素则是图个方便。它并不用于达到与需要特定接口的客户系统打交道这个目的，而是用于提供一个简化的接口。

// 示例: 设置HTML元素的样式
var element = document.getElementById('content');
element.style.color = 'red';

element.style.fontSize = '16px';

// 要求：要一次设置几个元素的样式
// 有三个ID为foo、bar和baz的元素，并且想把它们的文本颜色都设置为红色
var element1 = document.getElementById('foo');
element1.style.color = 'red';

var element2 = document.getElementById('bar');
element2.style.color = 'red';

var element3 = document.getElementById('baz');
element3.style.color = 'red';

// 门面模式
setStyle(['foo', 'bar', 'baz'], 'color', 'red');
function setStyle(elements, prop, val) {
	for (var i = 0, len = elements.length; i<len; ++ i) {
		document.getElementById(elements[i]).style[prop] = val;
		console.log(elements[i], prop, val);
	}
}

//一次设置多个元素的多个样式就更好了，不必反复使用setStyle方法。
setStyle(['foo'], 'position', 'absolute');
setStyle(['foo'], 'top', '50px');
setStyle(['foo'], 'left', '300px');

// 设计一个更复杂的接口把所有逻辑都组合在另一个门面元素中
setCSS(['foo'], {
	position: 'absolute',
	top: '50px',
	left: '300px'
});
function setCSS(el, styles) {
	for (var prop in styles) {
		if (!styles.hasOwnProperty(prop)) continue;
		setStyle(el, prop, styles[prop]);
	}
}

setCSS(['foo', 'bar', 'baz'], {
	color: 'white',
	background: 'black',
	fontSize: '16px',
	fontFamily: 'gerogia, times, serif'
});